<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    
    <head>
        <title>Cytoscape Web</title>
        
        <script type="text/javascript" src="js/AC_OETags.js"></script>
        <script type="text/javascript" src="js/json2.js"></script>
        <script type="text/javascript" src="js/cytoscapeweb.js"></script>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            var d1, d2;
            var div_id = "cytoscapeweb";
            var vis;

            var layouts = [ { name: "Circle" }, 
                            { name: "Radial" }, 
                            { name: "Tree" }, 
                            { name: "ForceDirected", options: { maxTime: 300000 } }
                          ];
            
            var tests = [ { file: 'pt1.graphml', nodes: 50,  edges: 100 }, 
                          { file: 'pt2.graphml', nodes: 100, edges: 200 }, 
                          { file: 'pt3.graphml', nodes: 200, edges: 400 }, 
                          { file: 'pt4.graphml', nodes: 400, edges: 800 }, 
                          { file: 'pt5.graphml', nodes: 800, edges: 1600 }
                        ] 
            
            // options used for Cytoscape Web
            var options = {};

            $(document).ready(function() {
                $("#user-agent").html(navigator.userAgent);
                
                var res = $('#results');
                res.append('<tr><th>Layout</th></tr>');

                $.each(tests, function(i, t) {
                	res.find('tr').append('<th>'+(t.nodes+t.edges)+' elements</th>');
                });
                
                $.each(layouts, function(i, l) {
                    var row = '<tr id="row_'+l.name+'"><td>'+l.name+'</td>';
                    $.each(tests, function(j, t) {
                        row += '<td></td>';
                    });
                    row += '</tr>';
                	res.append(row);
                });
                
                vis = new org.cytoscapeweb.Visualization(div_id, options);
                test();
            });

            var tcount = 0;
            var lcount = 0;
            
            function test() {
                var layout;
                var t = tests[tcount];
                var file = t.file;
                var url = "fixtures/" + file;

            	$.get(url, function(data) {
                    if (typeof data !== "string") {
                        if (window.ActiveXObject) {
                        	data = data.xml;
                        } else {
                        	data = (new XMLSerializer()).serializeToString(dt);
                        }
                    }

                    vis.ready(function() {
                        addResults(layout, tcount);

                        if (lcount >= layouts.length) { ++tcount };
                        
                        if (tcount < tests.length) {
                            // Draw next:
                            setTimeout(function() {
                                test();
                            }, 500);
                        }
                    });

                    options.network = data;

                    if (lcount >= layouts.length) { lcount = 0; }
                    options.layout = layout = layouts[lcount++];

                    d1 = new Date();
                    vis.draw(options);
                });
            }

            function addResults(layout, i) {
                d2 = new Date();
                var elapsed = (d2.getTime() - d1.getTime()) / 1000;
                $($("#row_"+layout.name+" td")[i+1]).html(elapsed);
            }
            
        </script>

        <style>
            html, body { padding: 0; margin: 0; text-align: center; font-family: sans-serif; }
            h1, h2 { margin-top: 8px; }
            label { color: #0b94b1; font-size: 14px; }
            hr { border: #0b94b1 1px solid; }
            .center { text-align: center; }
            #header { width: 100%; height: 40px; padding: 4px 0; background-color: #0b94b1; color: #ffffff; }
            #cytoscapeweb { width: 600px; height: 400px; border-right: 2px solid #0b94b1; border-left: 2px solid #0b94b1; border-bottom: 2px solid #0b94b1; margin: 0 auto 0 auto; }
        </style>
    </head>
    
    <body>
        <div id="header">
            <h2>Cytoscape Web - Performance Tests</h2>
        </div>
        <div id="cytoscapeweb"></div>
        <p id="user-agent"></p>
        <hr/>
        <table id="results" width="100%" cellspacing="0"></table>
        <hr/>
        <p>
            <a href="http://cytoscapeweb.cytoscape.org/">Cytoscape Web</a>
            , &copy; 2010
        </p>
    </body>
    
</html>